<template>
  <div>
    <arrow-demo></arrow-demo>
    <canvas width="800" height="600" :ref="canvasRef"></canvas>
  </div>
</template>

<script>
import ArrowDemo from './Arrow'
export default {
  components: {
    ArrowDemo
  },
  data() {
    return {
      step: 5,
      cursorIdx: 0,
      tasks: [
        {
          x: 0,
          y: 0,
          width: 200,
          step: 0
        },
        {
          x: 0,
          y: 10,
          step: 0,
          width: 200
        },
        {
          x: 0,
          y: 20,
          step: 0,
          width: 200
        }
      ]
    }
  },
  computed: {
    canvasRef() {
      return 'canvasRef'
    },
    requestAnimFrame() {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.drawLine()
    })
  },
  methods: {
    getCanvasCtx() {
      const ref = this.$refs[this.canvasRef]
      return ref.getContext('2d')
    },
    drawLine() {
      const ctx = this.getCanvasCtx()
      // ctx.save()
      // ctx.clearRect(0, 0, canvas.width, canvas.height)
      // ctx.restore()
      let item = this.tasks[this.cursorIdx]
      if (this.cursorIdx >= this.tasks.length) return
      if (item.step < item.width) {
        ctx.beginPath()
        ctx.moveTo(item.x, item.y)
        ctx.lineWidth = 4
        ctx.strokeStyle = '#ff3300'
        item.step += this.step
        ctx.lineTo(item.x + item.step, item.y)
        ctx.stroke()
      } else {
        this.cursorIdx += 1
      }
      window.requestAnimationFrame(this.drawLine)
    },
    drawLine1() {
      const ctx = this.getCanvasCtx()
      if (this.step1 < this.width) {
        ctx.moveTo(0, 200)
        ctx.lineWidth = 4
        ctx.strokeStyle = '#ff3300'
        this.step1 += 5
        ctx.lineTo(0 + this.step1, 200)
        ctx.stroke()
        ctx.restore()
        window.requestAnimationFrame(this.drawLine1)
      } else {
        this.line1Flag = true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
